import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";

export default function TableHeightHook(subtract = 0, paginationHeight = 65) {
  const tableHeight = ref<number>(0);
  const loading = ref<boolean>(false);
  const showMore = ref<boolean>(false);
  const getTableHeight = () => {
    const wrapper = document.querySelector(".app-content") || ({} as any);
    // 减去 上下 padding
    const wrapperHeight = wrapper.clientHeight - 12;
    let searchWrapperHeight = 0;
    nextTick(() => {
      const searchWrapper = document.querySelector(".search-wrapper");
      searchWrapperHeight = searchWrapper?.clientHeight || 0;
      tableHeight.value = wrapperHeight - searchWrapperHeight - paginationHeight - subtract;
    });
  };
  window.addEventListener("resize", getTableHeight);
  onBeforeUnmount(() => {
    // 组件销毁、清除监听事件
    window.removeEventListener("resize", getTableHeight);
  });
  onMounted(() => {
    getTableHeight();
  });
  watch(
    () => showMore.value,
    () => {
      getTableHeight();
    }
  );
  return {
    tableHeight,
    loading,
    showMore
  };
}
